<template>
  <div class="AddTrain">
    <header>
      <span>新建车次</span>
      <div>
        <el-button @click="$router.go(-1)">返回</el-button>
        <el-button type="primary" @click="BtnAdd()">提交</el-button>
      </div>
    </header>
    <div class="main">
      <table>
        <tbody>
          <!-- 1 -->
          <tr>
            <td>
              *车次
              <input type="text" v-model="checi" @change="BtnCheci" />
            </td>
            <td>
              *车辆类型
              <select v-model="name" @change="SeleteValue">
                <option selected>高速动车</option>
                <option>动车组</option>
                <option>城际高速</option>
                <option>直达特快</option>
                <option>空调特快</option>
                <option>快速</option>
                <option>普快</option>
              </select>
            </td>
            <td></td>
            <td>
              *车长
              <input type="text" v-model="chezhang" @change="BtnChezhang" />
            </td>
            <td></td>
          </tr>
          <!-- 2 -->
          <tr>
            <td>车厢总数：{{ this.chexiangnum }}</td>
            <td></td>
            <td>车座总数：{{ chezuonum * 6 * chexiangnum }}</td>
            <td>限乘人数：{{ this.xianchengrenshu }}</td>
            <td>无座总数：{{ wuzuo }}</td>
          </tr>
          <!-- 3 -->
          <tr>
            <td>
              商务车厢数
              <el-input-number
                v-model="Chenum"
                @change="ChenumChange"
                :min="1"
                :max="10"
                label="描述文字"
              ></el-input-number>
            </td>
            <td>
              每车排数
              <el-input-number
                v-model="Painum1"
                @change="PainumChange1"
                :min="8"
                :max="10"
                label="描述文字"
              ></el-input-number>
            </td>
            <td>每车车座数：24</td>
          </tr>
          <!-- 4 -->
          <tr>
            <td>
              一等座车厢数
              <el-input-number
                v-model="Chenum1"
                @change="ChenumChange1"
                :min="1"
                :max="10"
                label="描述文字"
              ></el-input-number>
            </td>
            <td>
              每车排数
              <el-input-number
                v-model="Painum2"
                @change="PainumChange2"
                :min="1"
                :max="10"
                label="描述文字"
              ></el-input-number>
            </td>
            <td>每车车座数：52</td>
          </tr>
          <!-- 5-->
          <tr>
            <td>
              二等座车厢数
              <el-input-number
                v-model="Chenum2"
                @change="ChenumChange2"
                :min="6"
                :max="10"
                label="描述文字"
              ></el-input-number>
            </td>
            <td>
              每车排数
              <el-input-number
                v-model="Painum3"
                @change="PainumChange3"
                :min="17"
                :max="50"
                label="描述文字"
              ></el-input-number>
            </td>
            <td>每车车座数：85</td>
            <td>
              <span>
                每车限乘人数
                <el-input-number
                  v-model="Xiannum1"
                  @change="XiannumChange1"
                  :min="1"
                  :max="646"
                  label="描述文字"
                ></el-input-number>
              </span>
            </td>
            <td>每车无座数：10</td>
          </tr>
          <!-- 6 -->
          <tr>
            <td>
              软卧车厢数
              <el-input-number
                v-model="Chenum3"
                @change="ChenumChange3"
                :min="1"
                :max="10"
                label="描述文字"
              ></el-input-number>
            </td>
            <td>
              每车排数
              <el-input-number
                v-model="Painum4"
                @change="PainumChange4"
                :min="1"
                :max="10"
                label="描述文字"
              ></el-input-number>
            </td>
            <td>每车车座数：n</td>
            <td>
              每车限乘人数
              <el-input-number
                v-model="Xiannum2"
                @change="XiannumChange2"
                :min="1"
                :max="646"
                label="描述文字"
              ></el-input-number>
            </td>
            <td>每车无座数：0</td>
          </tr>
          <!-- 7 -->
          <tr>
            <td>
              硬卧车厢数
              <el-input-number
                v-model="Chenum4"
                @change="ChenumChange4"
                :min="1"
                :max="10"
                label="描述文字"
              ></el-input-number>
            </td>
            <td>
              每车排数
              <el-input-number
                v-model="Painum5"
                @change="PainumChange5"
                :min="1"
                :max="10"
                label="描述文字"
              ></el-input-number>
            </td>
            <td>每车车座数：n</td>
            <td>
              每车限乘人数
              <el-input-number
                v-model="Xiannum3"
                @change="XiannumChange3"
                :min="1"
                :max="100"
                label="描述文字"
              ></el-input-number>
            </td>
            <td>每车无座数：0</td>
          </tr>
          <!-- 8 -->
          <tr>
            <td>
              软座车厢数
              <el-input-number
                v-model="Chenum5"
                @change="ChenumChange5"
                :min="1"
                :max="10"
                label="描述文字"
              ></el-input-number>
            </td>
            <td>
              每车排数
              <el-input-number
                v-model="Painum6"
                @change="PainumChange6"
                :min="1"
                :max="10"
                label="描述文字"
              ></el-input-number>
            </td>
            <td>每车车座数：n</td>
            <td>
              每车限乘人数
              <el-input-number
                v-model="Xiannum4"
                @change="XiannumChange4"
                :min="1"
                :max="100"
                label="描述文字"
              ></el-input-number>
            </td>
            <td>每车无座数：0</td>
          </tr>
          <!-- 9 -->
          <tr>
            <td>
              硬座车厢数
              <el-input-number
                v-model="Chenum6"
                @change="ChenumChange6"
                :min="1"
                :max="10"
                label="描述文字"
              ></el-input-number>
            </td>
            <td>
              每车排数
              <el-input-number
                v-model="Painum7"
                @change="PainumChange7"
                :min="1"
                :max="10"
                label="描述文字"
              ></el-input-number>
            </td>
            <td>每车车座数：n</td>
            <td>
              每车限乘人数
              <el-input-number
                v-model="Xiannum5"
                @change="XiannumChange5"
                :min="1"
                :max="100"
                label="描述文字"
              ></el-input-number>
            </td>
            <td>每车无座数：0</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      //总人数
      zongrenshu: 0,
      //默认数据
      list: [],
      //下拉框默认值
      name: "",
      //车次默认值
      checi: "",
      //车长默认值
      chezhang: "",
      //限乘默认值
      xiancheng: 0,
      //无座默认值
      wuzuo: 0,

      // 商务车厢数
      Chenum: 1,
      // 一等
      Chenum1: 1,
      // 二等
      Chenum2: 1,
      // 软卧
      Chenum3: 1,
      // 硬卧
      Chenum4: 1,
      // 软座
      Chenum5: 1,
      // 硬座
      Chenum6: 1,
      //每车排数
      Painum1: 8,
      Painum2: 13,
      Painum3: 17,
      Painum4: 0,
      Painum5: 0,
      Painum6: 0,
      Painum7: 0,
      //每车限乘人数
      Xiannum1: 20,
      Xiannum2: 0,
      Xiannum3: 0,
      Xiannum4: 0,
      Xiannum5: 0,
    };
  },
  computed: {
    //车厢总数
    chexiangnum: function () {
      return (
        this.Chenum +
        this.Chenum1 +
        this.Chenum2 +
        this.Chenum3 +
        this.Chenum4 +
        this.Chenum5 +
        this.Chenum6
      );
    },
    //限乘人数
    xianchengrenshu: function () {
      return (
        this.Xiannum1 +
        this.Xiannum2 +
        this.Xiannum3 +
        this.Xiannum4 +
        this.Xiannum5
      );
    },
    //车座总数
    chezuonum: function () {
      return (
        this.Painum1 +
        this.Painum2 +
        this.Painum3 +
        this.Painum4 +
        this.Painum5 +
        this.Painum6 +
        this.Painum7
      );
    },
  },
  created() {},
  methods: {
    //新增
    async BtnAdd() {
      this.zongrenshu = this.chezuonum * 6 * this.chexiangnum;
      const res = await axios.post("/api/addtrain/list", {
        name: this.name, //车辆类型
        checi: this.checi, //车次
        chezhang: this.chezhang, //车长
        chexiangnum: this.chexiangnum, //车厢数
        zongrenshu: this.zongrenshu, //总人数
        xiancheng: this.xianchengrenshu, //限乘人数
      });
      if (res.data.code == 200) {
        this.list = res.data.data;
        this.$router.push("/train");
        this.$message({
          message: "提交成功",
          type: "success",
        });
      } else {
        this.$message({
          message: "提交失败，输入的值不能为空！",
          type: "success",
        });
      }
    },
    //下拉框
    SeleteValue() {
      console.log(this.name, "下拉框");
    },
    //车次
    BtnCheci() {
      console.log(this.checi, "车次");
    },
    //车长
    BtnChezhang() {
      console.log(this.chezhang, "车长");
    },
    // 商务车厢数
    ChenumChange(value) {
      console.log(value);
    },
    // 一等车
    ChenumChange1(value) {
      console.log(value);
    },
    // 二等车
    ChenumChange2(value) {
      console.log(value);
    },
    // 软卧
    ChenumChange3(value) {
      console.log(value);
    },
    // 硬卧
    ChenumChange4(value) {
      console.log(value);
    },
    // 软座
    ChenumChange5(value) {
      console.log(value);
    },
    // 硬座
    ChenumChange6(value) {
      console.log(value);
    },
    // 每车排数1
    PainumChange1(value) {
      console.log(value);
    },
    //每车排数2
    PainumChange2(value) {
      console.log(value);
    },
    //每车排数3
    PainumChange3(value) {
      console.log(value);
    },
    //每车排数4
    PainumChange4(value) {
      console.log(value);
    },
    //每车排数5
    PainumChange5(value) {
      console.log(value);
    },
    //每车排数6
    PainumChange6(value) {
      console.log(value);
    },
    //每车排数7
    PainumChange7(value) {
      console.log(value);
    },
    // 每车限乘人数
    XiannumChange1(value) {
      console.log(value);
    },
    // 每车限乘人数2
    XiannumChange2(value) {
      console.log(value);
    },
    // 每车限乘人数3
    XiannumChange3(value) {
      console.log(value);
    },
    // 每车限乘人数4
    XiannumChange4(value) {
      console.log(value);
    },
    // 每车限乘人数5
    XiannumChange5(value) {
      console.log(value);
    },
  },
};
</script>

<style lang="scss" scoped>
select {
  height: 25px;
  border-radius: 10px;
  border: 1px solid #ccc;
}
input {
  height: 25px;
  border-radius: 10px;
  border: 1px solid #ccc;
}
.AddTrain {
  width: 100%;
  height: 100%;
  header {
    height: 60px;
    border-bottom: 1px solid #ccc;
    line-height: 60px;
    padding-left: 10px;
    display: flex;
    justify-content: space-between;
    padding-right: 30px;
    button {
      width: 120px;
    }
  }
  .main {
    padding: 40px;
    table {
      width: 100%;
      text-align: center;
      tr {
        height: 64px;
      }
      select {
        width: 120px;
      }
    }
  }
}
</style>
